<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .curent{
            background: #000;
            color: #fff;
        }
    </style>
</head>
<body>
<h1 id="title">jQuery简介</h1>
<ul>
    <li>jQuery语法</li>
    <li>jQuery选择器</li>
    <li>jQuery事件</li>
    <li>jQuery动画</li>
</ul>
<dl>
    <dt>
        jQuery选择器
    </dt>
    <dd>id选择器</dd>
    <dd>标签选择器</dd>
    <dd>类选择器</dd>
</dl>
<script src="../js/jquery-3.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {

        // $().xx();
        // $(选择器)  id name tagName class ....
        // $("#title").addClass("curent"); //添加类样式

        // $("#title").css("background","#000");

        //json对象
        //返回当前操作对象
        $("#title").css( {
            "background":"#000",
            "color":"#f00",
            "padding":"10px"
        }).hide().show().addClass("curent");

        //隐式迭代
        $("li,dd").css("color","#ff7300");

        $("li,dd").click(function () {
            // this -> DOM
            alert(this.innerText)

            alert($(this).text())
            // alert($("li,dd").text())
        })
    })

    //数组
    // let lis = document.getElementsByTagName("li");
    // for (let li of lis) {
    //     li.style.color = "#ff7300";
    // }
</script>
</body>
</html>